<template>
  <div class="header-content-render-container">
    <div class="menu-container" v-if="systemMenus.length > 1">
      <template
        v-for="menu in systemMenus"
      >
        <div
          :class="[
            'menu-item',
            {
              'menu-item--active': activeMenu === menu.path
            }]"
          :key="menu.name"
          v-if="!menu.hidden"
          @click="handlerMenu(menu.path)"
        >
          {{ menu.meta.title }}
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 主菜单
    mainMenu: {
      type: Array,
      default: () => [],
    },

    // activeMenu
    activeMenu: {
      type: String,
      default: () => '',
    },
  },

  computed: {
    systemMenus() {
      return this.mainMenu.filter(item => !item.hidden)
    }
  },

  methods: {
    handlerMenu (path) {
      this.$router.push(path)
    },
  },
}
</script>

<style lang="scss" scoped>
.header-content-render-container {
  .menu-container {
    display: flex;
    .menu-item {
      padding: 0 $padding-xs;
      font-weight: bold;
      cursor: pointer;
      font-size: $font-size-md;
    }

    .menu-item--active {
      color: $theme-color;
    }
  }
}
</style>
